<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
</head>
<body>
<style>
    #demo1{
        width: 200px;
        height: 200px;
        position: relative;
        border: 1px solid #465468;
    }
    #demo1 img{
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>
<p>方法一：margin:auto法</p>
<div id="demo1">
    <img src="./4.png">
</div>
<p>方法二：负margin法</p>
<style>
    .container1{
        width: 200px;
        height: 200px;
        border: 2px solid #379;
        position: relative;
    }
    .inner1{
        width: 90%;
        height: 90%;
        background-color: #746;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<div class="container1">
    <div class="inner1"></div>
</div>
-----------------------------------------------------------
<p>方法一：table-cell法</p>
<style>
    #demo2{
        width: 200px;
        height: 200px;
        border: 3px solid #555;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    demo2 img{
        vertical-align: middle;
    }
</style>
<div id="demo2">
    <img src="./4.png">
</div>

<p>方法二：弹性盒子法</p>
<style>
    .container2{
        width: 300px;
        height: 100px;
        border: 3px solid #546461;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inner2{
        border: 3px solid #458761;
        padding: 10px;
    }

</style>
<div class="container2">
    <div class="inner2">
        我在容器中水平垂直居中
    </div>
</div>

</body>
</html>